<ui:composition template="/layout.xhtml"
				xmlns="http://www.w3.org/1999/xhtml"
				xmlns:ui="http://java.sun.com/jsf/facelets"
				xmlns:h="http://java.sun.com/jsf/html"
				xmlns:f="http://java.sun.com/jsf/core">

	<ui:define name="conteudo">
	
		<h1>Novo Contato</h1>
	
		<h:form>
			
				<h:panelGrid columns="3">
			
					<h:outputLabel value="#{msgs['primeiro.nome']}" for="inputNome" />
					<h:inputText required="true" id="inputNome" value="#{agendaBean.contato.nome}"/>
					<h:message for="inputNome" />
				
					<h:outputLabel value="Data de Nascimento: " for="inputData" />
					<h:inputText required="true" id="inputData" value="#{agendaBean.contato.dataNascimento}" />
					<h:message for="inputData" />

					<h:outputLabel value="Matrícula: " for="inputMatricula" />
					<h:inputText label="Matrícula" required="true" 
									id="inputMatricula" 
									value="#{agendaBean.contato.matricula}" >
						<f:validateLength minimum="6" maximum="6" />
						<f:validateLongRange minimum="300000" maximum="399999" />
					</h:inputText>
					<h:message for="inputMatricula" />
					
					<h:outputLabel value="Quantidade de Filhos: " for="inputNumFilhos" />
					<h:inputText required="true" id="inputNumFilhos" 
								 value="#{agendaBean.contato.numeroFilhos}" >
						<f:validator validatorId="NumeroDeFilhosValidator" />
					</h:inputText>					
					<h:message for="inputNumFilhos" />
					
					<h:outputLabel value="Estado: " for="selectEstado" />
					<h:selectOneMenu id="selectEstado" value="#{agendaBean.contato.estado}"
									  valueChangeListener="#{agendaBean.estadoMudou}" 
									  onchange="submit()" immediate="true" >
						<f:selectItems value="#{agendaBean.estados}" />
					</h:selectOneMenu>
					<h:message for="selectEstado" />
					
				
					<h:outputLabel rendered="#{agendaBean.mostrarCidades}" value="Cidade: " for=			"selectCidade" />
					<h:selectOneMenu rendered="#{agendaBean.mostrarCidades}" id="selectCidade" value="#{agendaBean.contato.cidade}">
							<f:selectItems binding="#{agendaBean.selectCidades}" />
					</h:selectOneMenu>
					<h:message rendered="#{agendaBean.mostrarCidades}" for="selectCidade" />
				
					<h:commandButton value="Cadastrar" action="#{agendaBean.cadastrarContato}" />
					
				</h:panelGrid>
			</h:form>
			
	</ui:define>
	
</ui:composition>
